<template>
  <div class="app-container">
    <!-- <app-header></app-header> -->
    <div class="app-main">
      <!-- 客户 -->
      <template v-if="role === 'customer'">
        <div class="infos">
          <!-- 申请单 -->
          <div class="apply">
            <div class="caption">申请单信息</div>
            <div class="item">
              <span class="name">申请编号</span>
              <span class="value">{{ infos.propertyNumber }}</span>
            </div>
            <div class="item">
              <span class="name">借款人姓名</span>
              <span class="value">{{ infos.propertyUserName }}</span>
            </div>
            <div class="item">
              <span class="name">身份证</span>
              <span class="value">{{ infos.userIdentityidentity }}</span>
            </div>
            <div class="item">
              <span class="name">手机号</span>
              <span class="value">{{ infos.propertyUserPhone }}</span>
            </div>
            <div class="item">
              <span class="name">申请时间</span>
              <span class="value">{{ infos.createTime }}</span>
            </div>
            <template v-if="infos.propertyState === '已放款'">
              <div class="item">
                <span class="name">贷款金额</span>
                <span class="value">{{ infos.loanAmount }}万</span>
              </div>
              <div class="item">
                <span class="name">贷款完成时间</span>
                <span class="value">{{ infos.updateTime }}</span>
              </div>
            </template>
            <div class="item">
              <span class="name">状态</span>
              <span
                class="value status"
                :class="{
                  warn: infos.propertyState === '待提交',
                  error: ['已关闭', '已取消'].includes(infos.propertyState)
                }"
              >
                {{ infos.propertyState }}
              </span>
            </div>
            <div
              class="item"
              v-if="
                !['已取消', '待收件', '待提交'].includes(infos.propertyState)
              "
            >
              <span class="name">客户经理</span>
              <span class="value">{{ infos.managerName }}</span>
            </div>
            <div class="item" v-if="infos.propertyState === '已关闭'">
              <span class="name">原因</span>
              <span class="value">{{ infos.opinion }}</span>
            </div>
          </div>
          <!-- 房产 -->
          <div class="house" v-if="infos.propertyState !== '已放款'">
            <div v-for="(house, index) in houseList" :key="index">
              <div class="caption">房产信息{{ index + 1 }}</div>
              <div class="item">
                <span class="name">房产所在地</span>
                <span class="value">{{
                  house.address.replace(/\//gim, "")
                }}</span>
              </div>
              <div class="item">
                <span class="name">预估可贷额度</span>
                <span class="value">{{ house.rectrdAssessFuture }}万</span>
              </div>
            </div>
          </div>
        </div>
        <div class="hint" v-if="infos.propertyState === '已放款'">
          <img src="@/assets/images/common/warn.png" alt="" />
          您的押好贷申请已进行放款，请注意及时还款！
        </div>
        <!-- 加template元素防止按钮之间切换抖动 -->
        <template v-if="infos.propertyState">
          <div class="btns" v-if="infos.propertyState === '已取消'">
            <button class="btn btn-primary btn-back" @click="$router.back()">
              返回
            </button>
          </div>
          <div class="btn-group" v-else>
            <button
              class="btn btn-plain"
              @click="complete"
              v-if="infos.propertyState === '待提交'"
            >
              前往完善申请
            </button>
            <button
              class="btn btn-plain"
              @click="cancel"
              v-else-if="infos.propertyState === '待收件'"
            >
              取消申请
            </button>
            <button class="btn btn-plain" v-else>
              <a :href="'tel:' + infos.managerPhone">联系客户经理</a>
            </button>
            <button class="btn btn-primary" @click="$router.back()">
              返回
            </button>
          </div>
        </template>
      </template>
      <!-- 客户经理 -->
      <template v-else>
        <div class="infos manager">
          <!-- 申请单 -->
          <div class="apply">
            <div class="caption">申请信息</div>
            <div class="item">
              <span class="name">申请编号</span>
              <span class="value">{{ infos.propertyNumber }}</span>
            </div>
            <div class="item">
              <span class="name">申请时间</span>
              <span class="value">{{ infos.createTime }}</span>
            </div>
            <div class="item">
              <span class="name">推荐人</span>
              <span class="value">{{ infos.referrerName }}</span>
            </div>
            <div class="item">
              <span class="name">状态</span>
              <span
                class="value status"
                :class="{
                  error: ['已拒绝', '客户取消'].includes(infos.propertyState)
                }"
              >
                {{ infos.propertyState }}
              </span>
            </div>
            <div class="item">
              <span class="name">借款人姓名</span>
              <span class="value">{{ infos.propertyUserName }}</span>
            </div>
            <div class="item">
              <span class="name">身份证号</span>
              <span class="value">{{ infos.userIdentityidentity }}</span>
            </div>
            <div class="item">
              <span class="name">手机号</span>
              <span class="value">{{ infos.propertyUserPhone }}</span>
            </div>
          </div>
          <!-- 房产 -->
          <div class="house">
            <div v-for="(house, index) in houseList" :key="index">
              <div class="caption">房产信息{{ index + 1 }}</div>
              <div class="item">
                <span class="name">房产所在地</span>
                <span class="value">{{
                  house.recordPropertySite.replace(/\//gim, "")
                }}</span>
              </div>
              <div class="item">
                <span class="name">小区名称</span>
                <span class="value">{{ house.recordPlotName }}</span>
              </div>
              <div class="item">
                <span class="name">楼栋号</span>
                <span class="value">{{ house.rectrdBuilding }}</span>
              </div>
              <!-- <div class="item">
                <span class="name">单元号</span>
                <span class="value">{{ house.rectrdUnit }}</span>
              </div> -->
              <div class="item">
                <span class="name">门牌号</span>
                <span class="value">{{ house.rectrdHouseNumber }}</span>
              </div>
              <div class="item">
                <span class="name">建筑面积</span>
                <span class="value">{{ house.rectrdArea }}平</span>
              </div>
              <div class="item">
                <span class="name">房产类型</span>
                <span class="value">{{ house.rectrdType }}</span>
              </div>
              <!-- <div class="item">
                <span class="name">楼层</span>
                <span class="value">{{ house.rectrdFloor }}</span>
              </div>
              <div class="item">
                <span class="name">总楼层</span>
                <span class="value">{{ house.rectrdCountFloor }}</span>
              </div> -->
              <div class="item">
                <span class="name">评估单价</span>
                <span class="value">{{ house.rectrdAssessOnemoney }}元/平</span>
              </div>
              <div class="item">
                <span class="name">评估总价</span>
                <span class="value">{{ house.rectrdAssessTotalmoney }}万元</span>
              </div>
              <div class="item">
                <span class="name">预估可贷额度</span>
                <span class="value">{{ house.rectrdAssessFuture }}万元</span>
              </div>
            </div>
          </div>
        </div>
        <div class="btns">
          <button class="btn btn-primary btn-back" @click="$router.back()">
            返回
          </button>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { customerApplyBillDetail, cancelApply } from "@/api/customer";
import { managerApplyBillDetail } from "@/api/manager";
import { dateFormat } from "@/utils";
import { ApplyBillStatus } from "@/utils/constant";
export default {
  name: "applyDetail",
  computed: {
    ...mapGetters("user", ["role"])
  },
  data() {
    return {
      infos: {}, // 基本信息
      houseList: [] //房产列表
    };
  },
  created() {
    if (this.role === "manager") {
      this.$route.meta.title = document.title = "申请单详情";
      this.fetchManagerDetail();
    } else if (this.role === "customer") {
      this.fetchCustomerDetail();
    }
  },
  methods: {
    /* 获取客户申请单详情 */
    fetchCustomerDetail() {
      customerApplyBillDetail({
        propertyNumber: this.$route.params.id
      }).then(res => {
        if (res.respCode === "000000") {
          /* 时间格式化 */
          const createTime = res.params.Property.createTime;
          const updateTime = res.params.Property.updateTime;
          res.params.Property.createTime = dateFormat(
            createTime,
            "yyyy-MM-dd hh:mm:ss"
          );
          res.params.Property.updateTime = dateFormat(
            updateTime,
            "yyyy-MM-dd hh:mm:ss"
          );
          /* 状态转义 */
          const propertyState = res.params.Property.propertyState;
          res.params.Property.propertyState =
            ApplyBillStatus[propertyState].customer;

          this.infos = res.params.Property;
          this.houseList = res.params.houseList;
        }
      });
    },
    /* 前往完善申请 */
    complete() {
      window.sessionStorage.setItem("orderId", this.infos.propertyNumber);
      this.$router.push({ name: "apply2" });
    },
    /* 取消申请 */
    cancel() {
      this.$messagebox({
        message: "是否确认取消该申请?",
        showConfirmButton: true,
        showCancelButton: true,
        confirmButtonText: "是",
        cancelButtonText: "否"
      }).then(res => {
        if (res === "confirm") {
          cancelApply({
            propertyNumber: this.infos.propertyNumber
          }).then(res => {
            if (res.respCode === "000000") {
              this.$toast({
                message: "取消成功",
                position: "bottom",
                duration: 1500
              });
              this.fetchCustomerDetail();
            }
          });
        }
      });
    },
    /* 客户经理查看客户申请单详情 */
    fetchManagerDetail() {
      managerApplyBillDetail({
        propertyNumber: this.$route.params.id
      }).then(res => {
        if (res.respCode === "000000") {
          /* 时间格式化 */
          const createTime = res.params.Property.createTime;
          res.params.Property.createTime = dateFormat(
            createTime,
            "yyyy-MM-dd hh:mm:ss"
          );
          /* 状态转义 */
          const propertyState = res.params.Property.propertyState;
          res.params.Property.propertyState =
            ApplyBillStatus[propertyState].manager;

          this.infos = res.params.Property;
          this.houseList = res.params.houseList;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$btn-group-height: 1rem;
$padding-lr: 0.15rem;
$margin: 0.15rem;
.app-main {
  padding-top: 0.1rem;
  .infos {
    // max-height: calc(100% - #{$btn-group-height});
    &.manager {
      max-height: none;
    }
    background-color: #fff;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    .caption {
      color: #333;
      font-size: 0.16rem;
      line-height: 1;
      margin-bottom: $margin;
      padding: 0 $padding-lr;
      padding-top: $margin;
    }
    .house .caption {
      border-top: 1px solid #e9e9e9;
    }
    .item {
      font-size: 0.14rem;
      line-height: 0.16rem;
      color: #666;
      margin-bottom: $margin;
      padding: 0 $padding-lr;
      display: flex;
      justify-content: space-between;
      .name {
        flex: 2;
      }
      .value {
        flex: 5;
        color: #333;
        text-align: right;
        &.status {
          color: #41b163;
          &.warn {
            color: #eeb361;
          }
          &.error {
            color: #e56151;
          }
        }
      }
    }
  }
  .hint {
    display: flex;
    align-items: center;
    height: 0.37rem;
    padding: $padding-lr;
    color: #999;
    font-size: 0.12rem;
    img {
      width: 0.17rem;
      height: 0.17rem;
      margin-right: 0.05rem;
    }
  }
  .btn-group,
  .btns {
    width: 100%;
    height: $btn-group-height;
    padding: 0 $padding-lr;
    display: flex;
    align-items: center;
    justify-content: space-between;
    a {
      color: inherit;
    }
    .btn-back {
      width: 100%;
      height: 0.42rem;
    }
  }
}
</style>
